import React, { useState } from 'react'
import "./index.css"

export default function Item({ todo, done }) {
  const [isActive, setIsActive] = useState(false)

  const mouseHandle = (bool) => {
    return () => {
      setIsActive(bool)
    }
  }



  return (
    <li onMouseEnter={mouseHandle(true)} onMouseLeave={mouseHandle(false)} className={isActive ? "active" : ""}>
      <label>
        <input type="checkbox" checked={done} />
        <span>{todo}</span>
      </label>
      <button className="btn btn-danger" style={{ display: isActive ? "block" : "none" }}>删除</button>
    </li>
  )
}
